<script setup>
import router from '@/router/beforeEach'
import { SendOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <div class="content">
    <button
      @click="router.push('/about')"
      class="button"
    >
      去报名！
      <SendOutlined />
    </button>
  </div>
</template>

<style lang="scss" scoped>
.content {
  position: relative;
    /* 设置父容器为相对定位 */
  @keyframes glowing-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    50% {
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }

  .button {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #668f77, #f3f708);
    border: none;
    border-radius: 2rem;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: glowing-pulse 2s infinite;
    transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .button::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 30px;
    box-shadow: 0 0 10px #ff7730;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .button:hover {
    color: #ff9d00;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    background-position: right center;
  }

  .button:hover::before {
    opacity: 1;
  }
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 400px) {
  /* .content {
    width: 80px;
    height: 80px;
    background-color: aqua;
  } */
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 401px) and (max-width: 1200px) {
  /* .content {
    width: 60px;
    height: 60px;
    background-color: red;
  } */
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
  /* .content {
    width: 100vh;
    height: 100%;
    background-color: blue;
  } */
}
</style>
